<template>
  <div id="infor">
    <nav-header></nav-header>
    <div class="infor-content">
      <sidebar
        :tags="tags"
        @conIndex="getIndex($event)"
        ref="father"
        :defaultIndex="defaultIndex"
      ></sidebar>

      <div class="infor-right" v-if="ctnIndex == 0" v-loading="loading">
        <div class="account">全部屏蔽</div>
        <div class="fansCtn" v-if="userArr.length !== 0">
          <div class="article" v-for="(item, index) in userArr" :key="index">
            <div class="fansHeader">
              <div class="article-header" @click="goUp(item.userId)">
                <img :src="item.headImage" alt />
              </div>
            </div>

            <div class="article-name">
              <span>{{ item.nickName }}</span>
            </div>
            <div class="fansIntro" :title="item.introduce">
              {{ item.introduce }}
            </div>
            <div class="shield-btn User" @click="cancel(0, item.userId)">
              取消屏蔽
            </div>
          </div>
        </div>
        <div class="tagCtn noList" v-else>暂时没有内容哦</div>
      </div>
      <div class="infor-right" v-if="ctnIndex == 1" v-loading="loading">
        <div class="account">全部屏蔽</div>
        <div class="tagCtn" v-if="talkList.length !== 0" v-loading="loading">
          <div class="tag" v-for="(item, index) in talkList" :key="index">
            <div class="shield-ctn">#{{ item }}</div>
            <div class="shield-btn" @click="cancel(1, item)">
              取消屏蔽
            </div>
          </div>
        </div>
        <div class="tagCtn noList" v-else>暂时没有内容哦</div>
      </div>
    </div>

    <nav-footer ref="child"></nav-footer>
  </div>
</template>
<script>
import Sidebar from "../components/Sidebar";
import NavHeader from "../components/Header";
import NavFooter from "../components/Footer";
export default {
  data() {
    return {
      tags: [{ name: "屏蔽用户" }, { name: "屏蔽标签" }],
      list: [{}, {}, {}],
      defaultIndex: 0,
      ctnIndex: 0,
      loading: false,
      isCancel: false,
      talkVal: "",
      userVal: "",
      talkList: [],
      shieldCtn: "",
      userList: [],
      userArr: [],
    };
  },
  components: {
    Sidebar,
    NavHeader,
    NavFooter,
  },
  created() {
    this.init(1);
  },
  methods: {
    //接受子组件index
    getIndex(e) {
      this.ctnIndex = e;
      if (e == 2) {
        this.getAgree();
      }
      if (e == 3) {
        this.contactUs();
      }
    },

    //屏蔽列表
    init() {
      this.$fetch(`/laiwen/hate/frontend/list`).then((res) => {
        if (res.hate.talkArr) {
          let talkList = res.hate.talkArr.split("|");
          //去重
          talkList = [...new Set(talkList)];
          this.result = res.hate;
          this.talkList = talkList;
        }
        if (res.users) {
          let userList = res.hate.userArr.split(",");
          this.userList = userList;
          this.result = res.hate;
          this.userArr = res.users;
        }
      });
    },



    //获取屏蔽用户
    getUser(e) {
      let val = e.detail.value;
      this.setData({
        userVal: val,
      });
    },

    //取消屏蔽
    cancel(isTalk, item) {
      //0 屏蔽用户  1 屏蔽话题
      if (!isTalk) {
        this.cancelUser(item);
      } else {
        this.cancelTalk(item);
      }
    },
    //屏蔽用户
    cancelUser(id) {
      console.log(id)
      for (let i of this.userList.keys()) {
        if (this.userList[i] == id) {
          this.userList.splice(i, 1);
        }
      }
      let hate = {};
      hate.userArr = this.userList.join(",");
      hate.talkArr = this.result.talkArr;
      this.$post(`/laiwen/hate/frontend/update`, hate, "post").then((res) => {
        console.log(res);
        if (res.code == 0) {
          this.$message.success("屏蔽解除");
          this.init();
        }
      });
    },
    //屏蔽话题
    cancelTalk(talkKw) {
      console.log(talkKw);
      for (let i of this.talkList.keys()) {
        if (this.talkList[i] == talkKw) {
          this.talkList.splice(i, 1);
        }
      }
      let hate = {};
      hate.userArr = this.result.userArr;
      hate.talkArr = this.talkList.join("|");
      this.$post(`/laiwen/hate/frontend/update`, hate, "post").then((res) => {
        console.log(res);
        if (res.code == 0) {
          this.$message.success("屏蔽解除");
          this.init();
        }
      });
    },
  },
  mounted() {
    this.getRem(1920, 100);
  },
};
</script>

<style scoped lang="scss">
@import "../assets/scss/mixin";
.aboutUs {
  cursor: pointer;
}
.ideaContent {
  height: 5.62rem !important;
  flex-direction: column;
}
.iptHeight {
  height: 0.42rem !important;
}
img {
  width: 100%;
  height: 100%;
  display: block;
}
.infor-content {
  flex: 1 0 auto;
  @include wh(13.86rem, 6.72rem);
  margin-top: 0.68rem;
  @include fc(space-between);
  .infor-right {
    background: white;
    position: relative;
    @include wh(11.02rem, 6.74rem);
    flex-direction: column;
    align-items: center;
    @include borderRadius(0.05rem);
    .account {
      @include pa(-0.44rem, 0);
      @include fontAll(0.14rem, #303030, PingFang SC);
    }
  }
}
.tagCtn {
  width: 11.02rem;
  height: auto;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  border-radius: 0.05rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tag {
  width: 10.62rem;
  height: 0.74rem;
  display: flex;
  align-items: center;
  background-color: white;
  box-sizing: border-box;
  padding-left: 0.3rem;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
  font-size: 0.16rem;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 0.22rem;
  position: relative;
  color: rgba(40, 40, 40, 1);
  opacity: 1;
}
.tag:nth-of-type(9n) {
  border-bottom: 0rem;
}
.noList {
  justify-content: center;
  height: 6rem;
}
.shield-btn {
  width: 0.8rem;
  height: 0.36rem;
  background: #ffe300;
  opacity: 1;
  font-size: 0.16rem;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 0.36rem;
  color: #282828;
  text-align: center;
  position: absolute;
  right: 0.2rem;
  border-radius: 0.05rem;
}
.fansCtn {
  width: 11.02rem;
  min-height: 8.68rem;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  border-radius: 0.05rem;
  box-sizing: border-box;
  flex-wrap: wrap;
  display: flex;
  padding-top: 0.32rem;
  padding-left: 0.45rem;
  padding-right: 0.45rem;
  padding-bottom: 0.04rem;
}
.fansHeader {
  width: 0.8rem;
  height: 0.85rem;
  position: relative;
}
.fansIcon {
  width: 0.16rem;
  height: 0.21rem;
  position: absolute;
  right: 0.08rem;
  bottom: 0;
}

.article-name {
  font-size: 0.16rem;
  font-family: PingFang SC;
  font-weight: 400;
  margin-top: 0.11rem;
  margin-bottom: 0.07rem;
  color: rgba(9, 9, 9, 1);
  opacity: 1;
  display: flex;
}
.article {
  width: 1.8rem;
  height: 1.8rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0rem 0rem 0.1rem rgba(0, 0, 0, 0.08);
  opacity: 1;
  display: flex;
  flex-direction: column;
  border-radius: 0.05rem;
  align-items: center;
  position: relative;

  justify-content: center;
  margin-right: 0.28rem;
  margin-bottom: 0.28rem;
  cursor: pointer;
}
.article-header {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  overflow: hidden;
}
.article-name {
  font-size: 0.16rem;
  font-family: PingFang SC;
  font-weight: 400;
  margin-top: 0.11rem;
  margin-bottom: 0.07rem;
  color: rgba(9, 9, 9, 1);
  opacity: 1;
  display: flex;
}
.article-name span {
  text-align: center;
}
.User {
  width: 0.68rem;
  height: 0.29rem;
  background: #fcec58;
  opacity: 1;
  border-radius: 0rem 0.05rem 0rem 0.05rem;
  position: absolute;
  right: 0;
  font-size: 0.15rem;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 0.29rem;
  color: #090909;
  top: 0;
}
</style>
